
<template>
  <div >
    <div class="addPro-container">
      <el-form :model="proInfo" :label-position="labelPosition" status-icon ref="proInfo" label-width="120px" validate-on-rule-change >
          <div class="inner-title">
            <p>基本信息</p>
            <div class="source" style="width:500px;margin:0 auto;">
                <el-form-item label="产品名称" prop="name" :rules="[{ required: true, message: '产品名称不能为空', trigger: 'blur'} ]" :autofocus="true">
                    <el-input v-model="proInfo.name" placeholder="输入产品名称"  ></el-input>
                </el-form-item>
                <el-form-item label="产品别名" prop="alias" :rules="[{ required: true, message: '产品名称不能为空', trigger: 'blur'} ]">
                    <el-input v-model="proInfo.alias" placeholder="输入产品名称"  ></el-input>
                </el-form-item>
                <el-form-item label="后台链接" prop="admin_url" :rules="[{ type: 'url', message: '请输入正确的链接地址', trigger: 'blur,change' }]">
                      <el-input v-model="proInfo.admin_url" placeholder="输入后台链接地址(带http://)" ></el-input>
                </el-form-item>
                <el-form-item label="账号密码">
                      <el-input v-model="proInfo.account_and_password" placeholder="输入密码"  ></el-input>
                </el-form-item>
                <el-form-item label="不纳入结算"  style="text-align:left">
                        <el-switch v-model="addProductForm.accountStatus" :change="openAccount()"></el-switch>
                </el-form-item>
                <el-form-item label="备注" prop="remarks" v-show="accountStatus" :rules="accountStatus?[{ required: true, message: '产品备注不能为空', trigger: 'blur' }]:[]" :autofocus="true">
                        <el-input type="textarea" v-model="proInfo.has_not_contract_reason" autosize placeholder="请输入备注信息" @change="select('addProductForm', 'remark')"></el-input>
                    </el-form-item>
            </div>   
          </div>
          <div class="inner-title" v-if="!accountStatus">
             <p>其他配置项</p>
             <div class="source" style="width:500px;margin:0 auto;">
                <el-form-item label="合同状态" class="oneRow" >
                    <el-radio-group v-model="proInfo.contractStatus">
                    <el-radio label="0" @change="changeContract()">签署中</el-radio>
                    <el-radio label="1" @change="changeContract()" >已完成</el-radio>
                    <el-radio label="2" @change="changeContract()">其他</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="项目负责人" prop="user_id" :rules="[{ required: true, message: '项目负责人不能为空', trigger: 'change'}]">
                      <el-select v-model="proInfo.user_id" multiple placeholder="请选择负责人" filterable >
                        <el-option v-for="item in leaderProject" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="签约公司"  prop="company_id" :rules="contractFinished?[{required: true, message: '合同已完成状态下，签约公司不能为空', trigger: 'change,blur'}]:[]"  ref="cooperateCompany" >
                      <el-select v-model="proInfo.company_id" placeholder="请选择签约公司" @change="select('addProductForm', 'cooperateCompany')">
                        <el-option
                        v-for="item in CooperateCompany"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客户" prop="customer" ref="customer" :rules="contractFinished?[{required: true, message: '合同已完成状态下，客户不能为空', trigger: 'change, blur'}]:[]">
                      <el-select v-model="proInfo.customer" filterable remote reserve-keyword allow-create @change="select('addProductForm', 'customer')"
                            placeholder="请输入客户名称"
                            :remote-method="remoteMethod"
                            :loading="loading">
                            <el-option
                            v-for="item in options4"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                  </el-form-item>
                <el-form-item label="备注"  v-show="contractOther" prop="remarks" :rules="contractOther?[{required: true, message: '合同已完成状态下，合同备注信息不能为空', trigger: 'change, blur'}]:[]">
                        <el-input type="textarea" v-model="proInfo.remarks" autosize placeholder="请输入备注信息" @change="select('addProductForm', 'contractRemark')"></el-input>
                    </el-form-item>  
                <div v-show="contractFinished">
                    <el-form-item label="合同编号" prop="contractNumber" :rules="contractFinished?[{required: true, message: '合同已完成状态下，合同编号不能为空', trigger: 'change, blur'}]:[]">
                        <el-input v-model="proInfo.contractNumber" placeholder="请输入合同编号"  @change="select('addProductForm', 'contractNumber')"></el-input>
                    </el-form-item>
                    <el-form-item label="有效期" prop="contractTime" :rules="contractFinished?[{required: true, message: '合同已完成状态下，合同有效期不能为空', trigger: 'change, blur'}]:[]">
                        <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="proInfo.contractTime"  @change="select('addProductForm', 'contractTime')"></el-date-picker>
                    </el-form-item>

                </div>  
                
                <el-form-item label="投放渠道" prop="putChannel" :rules="[{type: 'array', required: true, message: '请至少选择一个投放渠道', trigger: 'change'}]">
                    <el-checkbox-group v-model="proInfo.putChannel" >
                        <el-checkbox v-for="item in putChannel" :key="item.index" :label="item.name"  @change="setChannel(item.index, item.name)"></el-checkbox>
                    </el-checkbox-group>
                    
                </el-form-item>



                 <!-- <el-row class="clearfix" style="display:flex;margin-top:30px;" v-if="addProductForm.putChannel.length>0" >
                <div style="height:40px;width:120px;" class="pull-left" >
                  <label class="el-form-item__label" style="width:120px;text-align:right;">结算方式</label>
                </div>
                <div class="pull-left price-container">
                    <div class="productPrice-container" v-for="(name,index) in addProductForm.putChannel" :key="index">
                        <p><span>{{name}}</span></p>
                        <div>
                          <ul>
                            <li v-for="item in accountsWays" :key="item.label">
                                <input v-model='postOptions' :value='item.name'  type="checkbox">
                                <label :for='"demo"+index' v-text='item.name'></label>
                                <input type="text" name="" id="" placeholder="结算价格" >
                                <el-button type="text">阶梯价格</el-button>
                            </li>
                          </ul>
                        </div>
                    </div>
                </div> -->
                
                <!-- <div class="pull-left price-container">
                    <div class="productPrice-container"  v-if="addProductForm.putChannel.indexOf('下载器')!='-1'">
                        <p><span>下载器</span></p>
                        <el-checkbox-group v-model="xiazaiqi">
                          <el-checkbox v-for="ways in accountsWays" :label="ways.name" :key="ways.name" @change="setPrice('xiazaiqi',ways.name)">{{ways.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="productPrice-container"  v-if="addProductForm.putChannel.indexOf('本地包')!='-1'">
                        <p><span>本地包</span></p>
                        <el-checkbox-group v-model="bendibao">
                          <el-checkbox v-for="ways in accountsWays" :label="ways.name" :key="ways.name" @change="setPrice('bendibao',ways.name)">{{ways.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="productPrice-container"  v-if="addProductForm.putChannel.indexOf('收藏夹')!='-1'">
                        <p><span>收藏夹</span></p>
                        <el-checkbox-group v-model="shoucangjia">
                          <el-checkbox v-for="ways in accountsWays" :label="ways.name" :key="ways.name" @change="setPrice('shoucangjia',ways.name)">{{ways.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                    <div class="productPrice-container"  v-if="addProductForm.putChannel.indexOf('外放')!='-1'">
                        <p><span>外放</span></p>
                        <el-checkbox-group v-model="waifang">
                          <el-checkbox v-for="ways in accountsWays" :label="ways.name" :key="ways.name" @change="setPrice('waifang',ways.name)">{{ways.name}}</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>     -->
             <!-- </el-row> -->
             </div>
            <!-- <el-form-item label="投放渠道" class="oneRow">
                <el-checkbox v-for="(item, index) in putChannel" :key="index" v-model="addProductForm.putChannel">{{item}}</el-checkbox>
                
            </el-form-item>
             <el-row class="clearfix" style="display:flex;" v-show="false">
                <div style="height:40px;width:120px;" class="pull-left" >
                  <label class="el-form-item__label" style="width:120px;text-align:right;">结算方式</label>
                </div>
                <div class="pull-left price-container" >
                    <div class="productPrice-container" v-for="(item, index) in putChannel" :key="index" v-show="false">
                        <p><span>{{item}}</span></p>
                        <ul>
                            <li v-for="item in accountsWays" :key="item.name">
                                <el-checkbox >{{item.name}}</el-checkbox>
                                <input type="text" name="" id="" placeholder="结算价格">
                                <el-button type="text">阶梯价格</el-button>
                            </li>
                        </ul>
                    </div>
                </div>    
             </el-row> -->
             
          </div>
          <el-form-item >
                <el-button type="primary" @click="submitForm('addProductForm')" v-show="operateType==='add'">添加</el-button>
                <el-button type="primary"  v-show="operateType==='info'">返回</el-button>
                <el-button type="primary"  @click="submitForm('addProductForm')" v-show="operateType==='editor'">更新</el-button>
            </el-form-item>  
      </el-form>
    </div>
    <el-dialog title="外放信息" :visible.sync="dialogVisible" width="515px" :close-on-click-modal=false>
        <el-form :label-position="labelPosition" label-width="120px" :model="form">
            <el-form-item label="下游渠道公司" >
                <el-input  placeholder="请输入下游渠道公司"></el-input>
            </el-form-item>
            <el-form-item label="签约公司">
                <el-input  placeholder="请输入签约公司"></el-input>
            </el-form-item>
            <el-form-item label="合同状态"  >
                            <el-radio-group >
                            <el-radio label="0" >签署中</el-radio>
                            <el-radio label="1" >已完成</el-radio>
                            <el-radio label="2" >其他</el-radio>
                            </el-radio-group>
                        </el-form-item>
            <!-- <el-form-item label="合同编号">
                <el-input  placeholder="请输入合同编号"></el-input>
            </el-form-item>
            <el-form-item label="有效期">
                    <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker>
                </el-form-item>         -->

        </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  name: 'ProductAdd',
  props: { 
    operateType: {
        type: String,
        default: 'add'
    },
    formData: {
        type: Object
    }
  },
  data() {
      return {
          addProductForm: {
            name: '',
            byname: '',
            customer: '', //客户
            systemUrl: '', //后台链接
            systemPassword: '' , 
            accountStatus: false, //是否结算
            remark: '', //备注
            leaderProject: [], //项目负责人
            cooperateCompany: '', // 签约公司
            contractStatus: '0',
            contractNumber: '',// 合同编号
            contractTime: '', // 合同有效期
            contractRemark: '', //合同备注
            putChannel: [], // 投放渠道
          },
          proInfo: {
            name: '', // 产品名称
            alias: '', // 产品别名
            admin_url: '', // 后台链接
            account_and_password: '', // 账号和密码
            has_not_contract_reason: '', // 不结算说明
            company_id: '', // 签约公司id
            user_id: [], // 项目负责人id
            remarks: '', // 备注
            contractStatus: '', // 合同状态
            customer: '', // 客户
            contractNumber: '', // 合同编号
            contractTime: '', // 合同有效期
            contractRemark: '', // 合同备注
            putChannel: [] // 投放渠道
          },
          xiazaiqi: [],
            bendibao: [],
            shoucangjia: [],
            waifang:[],
          form: {

          },
          account: {
              'xizaiqi':{
                  'anzhuang': ''
              },
              'bendibao': {}
          },
          accountStatus: false, 
          contractFinished: false, //合同状态完成
          contractOther: false, //合同状态其他
          state4: '',
          timeout:  null,
          value5: '',
          labelPosition: 'right',
          resetFields: ['customer', 'cooperateCompany'],
          dialogVisible: false,
        CooperateCompany: [{ // 签约公司
          value: '云动时代',
          label: '云动时代'
        }, {
          value: '日月同行',
          label: '日月同行'
        }],
        leaderProject:[{ //项目负责人
          value: '刘丛梅',
          label: '刘丛梅'
        },{
          value: '王小帅',
          label: '王小帅'
        }],
        accountsWays: [{name:'安装',label:'anzhuang'}, {name:'激活',label:'jihuo'}, {name:'注册',label:'zuche'}, {name:'CPS',label:'cps'}] , //结算方式
        putChannel: [{name:'下载器', label:'xiazaiqi'},{name:'本地包',label: 'bendibao'},{name:'收藏夹', label:'shoucangjia'}, {name:'外放', label:'waifang'}], //投放渠道
        options4: [],
        value9: [],
        list: [],
        loading: false,
        states: ["爱奇艺", '360', '腾讯'], //客户的查询，
        options:[ '0','1','2','3','4' ],           // 初渲染所有选项
        postOptions:['1','2'],
        inputs:['','','','','']
      }
  },
  
  computed: {
    ...mapGetters([
        'proInfo'
    ])
  },
  created() {
      let _this = this
      setTimeout(function() {
          console.log(_this.proInfo)
      console.log('type'+_this.operateType)
      console.log(_this.formData)
      }, 500)
    
  },
  
  methods: {
      openAccount () { //不纳入结算
          this.accountStatus = this.addProductForm.accountStatus;
        //   if (this.accountStatus) {
        //       console.log('添加验证');
        //       let remark = [];
        //       remark[0] = {required: true, message: '不纳入结算备注不能为空', trigger: 'blur'} 
        //       this.rules['remark'] = remark;
        //      console.log(this.rules)
        //   }
          
      },
      changeContract() { //合同状态
      let _self = this;
        this.resetFields.forEach((item) => {
            _self.$refs[item].resetField()
        })
          if(this.addProductForm.contractStatus === '0') {
              this.contractOther = false;
            this.contractFinished = false;
            
            
          }else if(this.addProductForm.contractStatus === '1') {
            this.contractOther = false;
            this.contractFinished = true;
          }else if(this.addProductForm.contractStatus === '2') {
              this.contractFinished = false;
            this.contractOther = true;
          } 
      },
      remoteMethod(query) { //客户的远程搜索
        if (query !== '') {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.options4 = this.list.filter(item => {
              return item.label.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options4 = [];
        }
      },
       submitForm(formName) { //表单提交
       console.log(this.rules)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
     select(formName, name) {
         this.$refs[formName].validateField(name, function() {
            
         })
         
     },
     setChannel(index, item) {
        console.log(index);
        console.log(item);
        if(this.addProductForm.putChannel.indexOf(index) === -1) {
            this.addProductForm.putChannel.push(index)  
        }else {
            let i = this.addProductForm.putChannel.indexOf(index);
            this.addProductForm.putChannel.splice(i, 1);
        }
        if(item === '外放' && this.addProductForm.putChannel.indexOf('外放') !== -1) {
            this.dialogVisible = true;
        }
    },
    setPrice(model,name) {
        console.log(model)
        console.log(this[model]);
        if(this[model].indexOf(name) !== -1) {
            this.$prompt('请输入价格', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showClose: false,
          closeOnClickModal: false,
          inputPlaceholder: '请输入价格',
          showCancelButton: false,
          inputPattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
          inputErrorMessage: '价格格式不正确'
        }).then(({ value }) => {

        //   this.$message({
        //     type: 'success',
        //     message: '你的邮箱是: ' + value
        //   });
        }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '取消输入'
        //   });       
        });
        }
        
    },
    save: function(){
       var aa=[]
       for(var i = 0;i<this.postOptions.length;i++){
        console.log(this.postOptions[i])
          alert(this.inputs[this.postOptions[i]])
       }

      }
   
  },
  mounted() {
      this.list = this.states.map(item => {
        return { value: item, label: item };
      });
  },
  computed: {
     
  },

}
</script>

<style type="text/css" lang="scss">
 ul li {
     list-style-type: none;
 }
 .price-container {
     flex: 1
 }
  .addPro-container {
      position: relative;
      .el-form-item__label {
          color: #000;
      }
      .inner-title {
          padding: 20px 40px 0px 60px;
          p {
              text-align: left;
              font-size: 14px;
              color: #2c3e50;
              font-weight: 900;
          }
         
      }
      .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
          width: 380px;
      }
      
  }
  .el-select {
      width: 100%;
  }
  .oneRow {
      .el-form-item__content {
          text-align: left;
      }
  }
  .productPrice-container {
      min-width: 300px;
      float: left;
      margin-left: 10px;
      p {
          color: #000;
          font-size: 14px;
          text-align: left;
          line-height: 40px;
          font-weight: 100;
      }
      .el-button--text span {
          color: #409EFF;
      }
      ul li {
          margin-bottom: 5px;
          input {
              min-height: 20px;
              margin-left: 5px;
              font-size: 13px;
              color: #666;
          }
      }
  }
//   .el-form--inline .el-form-item.width100, .el-autocomplete, .width100 .el-select {
//             width: 100%;
//         }
//         .el-form--inline .width100 .el-form-item__label {
//             width: 25%;
//         }
//         .el-form--inline .width100 .el-form-item__content {
//             width: 75%;
//         } 
</style>
